<template>
  <div class="personal-center">
    <div class="user-header">
      <div class="sign-in" @click="gotoUrl('/myPoints.html')"><i class="icon"></i><span>签到</span></div>
      <div class="avatar">
        <img :src="points.user_avatar" alt="">
      </div>
      <div class="userName">{{points.user_name}}</div>
      <!-- <div class="userName" @click="gotoUrl('/login.html')" v-else>Hi，等你好久了，去登录'</div> -->
    </div>
    <div class="points-box">
      <div class="meun-item" @click="gotoUrl('/myPoints.html')"><span>我的积分</span><i class="more"></i></div>
      <div class="points-volume">
        <div class="left"><span class="volume">{{parseInt(points.available_points) || 0}}</span><br><span class="text">剩余积分</span></div>
        <div class="right"><span class="volume">{{parseInt(points.consume_points) || 0}}</span><br><span class="text">已使用积分</span></div>
      </div>
    </div>
    <div class="my-collect">
      <div class="meun-item" @click="gotoUrl('/myCollect.html')"><span>我的收藏</span><i class="more"></i></div>
      <div class="collect-list">
        <div class="collect-item" v-for="(item, index) in collectList" :key="index" @click="gotoUrl('/goodsInfo.html?id=' + item.goods_id)">
          <div class="cover">
            <img :src="item.goods_img" alt="">
          </div>
          <div class="item-right">
            <div class="name">{{item.goods_name}}</div>
            <div class="desc">
              <span class="price">￥{{item.price}}</span>
              <span class="volume">已售{{item.goods_sell_num}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="meun-item item-add" @click="gotoUrl('/invitingFriends.html?iCode='+iCode)"><span>邀请好友</span><i class="more"></i></div>
    <div class="meun-item item-add" @click="gotoUrl('/myReview.html')"><span>我的评价</span><i class="more"></i></div>
    <div class="meun-item item-add" @click="gotoUrl('/orderList.html')"><span>我的订单</span><i class="more"></i></div>
    <div class="meun-item item-add" @click="gotoUrl('/setUp.html')"><span>设置</span><i class="more"></i></div>
  </div>
</template>

<script>
  import axios from 'axios';
  
  export default {
    name: 'personal-center',
    data: function() {
      return {
        // userInfo: {},
        points: {},
        collectList: [],
        iCode: '',
        // isLogin: false,
      }
    },
    mounted() {
      // this.getiCode();
      this.getPoints();
      // this.getUserInfo();
      this.getCollectList();
    },
    methods: {
      // getiCode() {
      //   let that = this;
      // },
      getPoints() {
        let  that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve({
              "user_avatar": "https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267",
              "user_name": "大花园",
              "consume_points": "548.00", // 已消费积分
              "available_points": "100.00" // 剩余积分
            })
          }).then((data) => {
            that.iCode = "12138"
            that.points = data
          })
        }
        axios.post('/Points/UserPoints').then((res) => {
          that.iCode = res.invite_code || "";
          that.points = res;
          if (!that.points.user_name) {
            return location.href = "/login.html";
          }
        })
      },
      // todo: 获取微信用户名，头像
      // getUserInfo() {
      //   let that = this;
      //   if(window.DEBUGGING) {
      //     return new Promise(function(resolve) {
      //       resolve({
      //         userName: '大花园',
      //         userAvatar: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
      //       })
      //     }).then(function(data){
      //       that.userInfo = data;
      //     }) 
      //   }
        // todo: 获取登陆用户的信息
        // axios.post('').then((data) => {
        //   that.userInfo = {
        //     userName: data.data.,
        //     userAvatar: data.data.,
        //     hasPoints: data.data.,
        //     usedPoints: data.data.
        //   }
        // })
      // },
      getCollectList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise(function(resolve) {
            resolve([{
              "comment_num": 0,
              "goods_name": "88恒喆紧密仪器恒喆紧密仪器恒喆紧密仪器恒喆紧密仪器恒喆紧密仪器",
              "formal_price": "50.00",
              "goods_cate": "58hrt",
              "goods_id": 8,
              "goods_sn": "SN_88",
              "goods_sell_num": 0,
              "collection_id": 1,
              "price": "88.00",
              "goods_type": "电池供应商",
              "describe": null,
              "stock": 65,
              "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
            },{
              "comment_num": 0,
              "goods_name": "恒喆紧密仪器",
              "formal_price": "50.00",
              "goods_cate": "58hrt",
              "goods_id": 8,
              "goods_sn": "SN_88",
              "goods_sell_num": 0,
              "collection_id": 1,
              "price": "88.00",
              "goods_type": "电池供应商",
              "describe": null,
              "stock": 65,
              "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
            }])
          }).then(function(data){
            that.collectList = data;
          });
        }

        // todo: 获取收藏列表
        axios.get('/collection/list',{
          params: {
            page: 1
          }
        }).then(function(res){
          that.collectList = res.slice(0,2);
        })
      },
      gotoUrl(url) {
        // todo: 
        location.href = url;
      }
    }
  }
</script>

<style lang="less">
  @import (reference) '~COMMON/common.less';

  .personal-center {
    padding: 0 10px;
    padding-bottom: 60px;
    .user-header {
      position: relative;
      height: 228px;
      margin: 0 -10px;
      text-align: center;
      color: #fff;
      background-image: linear-gradient(0deg, #039D4C, #07CC83);
      .sign-in {
        position: absolute;
        top: 20px;
        right: 13px;
        // vertical-align: middle;
        width: 70px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        border-radius: 13px;
        background-color: rgba(4, 167, 87, 0.8);
        .icon {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          margin-right: 3px;
          background-image: url(~IMGS/sign-in-icon.png);
          background-size: 100%;
        }
      }
      .avatar {
        >img {
          .Round(75px);
          margin-top: 30px;
          margin-bottom: 15px;
          border: 1px solid #fff;
        }
      }
      .userName {
        font-size: 16px;
      }
    }
    // 菜单样式
    .meun-item {
      text-align: right;
      line-height: 50px;
      padding-left: 18px;
      padding-right: 12px;
      margin-top: 10px;
      border-radius: 5px;
      background-color: #fff;
      >span {
        float: left;
      }
      .more {
        display: inline-block;
        width: 6px;
        height: 11px;
        background-image: url(~IMGS/more.png);
        background-size: 100%;
      }
      &:active {
        background-color: #ececec;
      }
    }
    .points-box {
      position: relative;
      margin-top: -70px;
      height: 146px;
      background-color: #fff;
      border-radius: 5px;
      z-index: 10;
      .meun-item {
        border-bottom: 1px solid #eaeaea;
        border-radius: none;
      }
      .points-volume {
        box-sizing: border-box;
        display: flex;
        padding: 20px 5px;
        align-items: center;
        text-align: center;
        .left {
          border-right: 1px solid #eaeaea;
        }
        .left, .right  {
          height: 54px;
          flex: 1;
          .volume {
            font-size: 24px;
            color: #ff3939;
          }
          .text {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
    .my-collect {
      border-radius: 5px;
      margin-top: 10px;
      background-color: #fff;
      .meun-item {
        border-radius: none;
      }
      .collect-list {
        padding: 0 16px;
        .collect-item {
          position: relative;
          padding: 12px 0;
          height: 80px;
          border-top: 1px solid #eaeaea;
          &:nth-of-type(1) {
            border-top: none;
          }
          .cover {
            // display: inline-block;
            float: left;
            margin-right: 12px;
            overflow: hidden;
            >img {
              width: 80px;
              height: 80px;
            }
          }
          .item-right {
            position: relative;
            display: -webkit-box;
            height: 80px;
            vertical-align: top;
            .name {
              font-size: 15px;
              color: #333;
              .Mult-line(2);
            }
            .desc {
              position: absolute;
              bottom: 0px;
              left: 0px;
              width: 100%;
              .price {
                font-size: 15px;
                color: #ff3939;
              }
              .volume {
                float: right;
                font-size: 14px;
                color: #999;
              }
            }
          }
        }
      }
    }
  }
</style>